<template>
  <view :class="['p-details', {'is-new-template':isNewTemplate}]">
    <!--tabs-->
    <view v-if="isNewTemplate" class="title">
      {{ title }}
    </view>
    <view v-else class="tabs">
      <x-tabs :active="currentTab" :list="tab" underline @change="handleChangeTab" />
    </view>
    <!-- 商品详情 -->
    <view v-if="currentTab === 'detail'" class="detail">
      <block style="width: 100%" v-for="(item, index) in productImages" :key="index">
        <image
          :src="formatOss(item)"
          :style="[setPicStyle(item)]"
          class="_image"
          lazy-load
          mode="widthFix"
        />
      </block>
    </view>
    <!-- 规格信息 -->
    <view v-if="currentTab === 'sku'" class="sku">
      <view class="ul">
        <view v-for="(item,index) in productAttr" :key="index">
          <view class="li" v-if="item.attrValue">
            <view class="dd">{{ item.attrName }}</view>
            <view class="dt">{{ item.attrValue }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import XTabs from '@/components/x-tabs';

export default {
  name: 'PDetails',
  components: {
    XTabs
  },
  props: {
    productAttr: {
      type: Array,
      default: () => []
    },
    productImages: {
      type: Array,
      default: () => []
    },
    isNewTemplate: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '商品详情'
    }
  },
  data() {
    return {
      currentTab: 'detail',
      tab: [{
        name: '商品介绍',
        value: 'detail'
      }, {
        name: '规格信息',
        value: 'sku'
      }]
    };
  },
  created() {},
  methods: {
    handleChangeTab(e) {
      this.currentTab = this.tab[e]?.value;
    },
    // 格式化图片
    formatOss(url) {
      return this.$tools.formatOss(url, 600);
    },
    // 设置图文详情图片样式
    setPicStyle(item) {
      if (item.includes('?width=')) {
        return this.$tools.convertPicRatio(item);
      } else {
        return {};
      }
    }
  }
};
</script>

<style lang="scss">
// 商品介绍/规格信息
.p-details {
  background: #ffffff; margin-top: 16px;
  &.is-new-template{
    margin: 16px var(--padding) 0 var(--padding);
  }
  ._image{ width: 100%;}
  .sku{
    .li{
      padding: 24px; display: flex; font-size: 28px; border-bottom: 1px solid $uni-page-bg;
      .dd{ width: 160px; color: $uni-color-info;}
      .dt{ flex: 1; color: $uni-color-default; }
    }
    .li:last-child{ border-bottom: none; }
  }

  .title{
    position: relative;
    color: #888;
    font-size: 32px;
    font-weight: 500;
    background: #F7F8FA;
    padding: 30px 0;
    text-align: center;
    &:before,
    &:after{
      content: "";
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 160px;
      height: 0;
      border-top: 1px dashed;
    }

    &:before{
      left: 100px;
    }
    &:after{
      right: 100px;
    }
  }
}
</style>
